<template>
  <transition name="el-message-fade" @after-leave="handleAfterLeave">
    <div
      :class="[
        'el-message',
        'ps-message-box',
        offset?'':'tCenter' ,
        center ? 'is-center' : '',
        showClose ? 'is-closable' : '',
        offsetX,
        customClass,
        currentClass?'ps-message-box-1':''
      ]"
      :style="positionStyle"
      v-show="visible"
      @mouseenter="onMouseenter"
      @mouseleave="startTimer"
      role="alert">
      <slot>
        <div v-if="!dangerouslyUseHTMLString" :class="['ps-massage',iconClass?'has-svg':'']">
          <svg-icon v-if="iconClass"
            :iconClass="iconClass"
            :class="currentClass"
            />
          <span class="ps-massage_inner"> {{message}}</span>
          <span v-if="urlText" class="url-text" @click="onUrlTextClick">{{urlText}}</span>
        </div>
        <p v-else v-html="message" class="el-message__content"></p>
      </slot>
      <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></i>
    </div>
  </transition>
</template>

<script type="text/babel">
export default {
  data () {
    return {
      visible: false,
      message: '',
      urlText: '',
      duration: 2000,
      offset: null,
      iconClass: '',
      currentClass: '',
      customClass: '',
      offsetX: '',
      onClose: null,
      showClose: false,
      closed: false,
      verticalOffset: 20,
      timer: null,
      dangerouslyUseHTMLString: false,
      center: false
    }
  },

  computed: {
    positionStyle () {
      return {
        'top': `${this.verticalOffset}px`
      }
    }
  },

  watch: {
    closed (newVal) {
      if (newVal) {
        this.visible = false
      }
    }
  },

  methods: {
    handleAfterLeave () {
      this.$destroy(true)
      this.$el.parentNode.removeChild(this.$el)
    },

    close () {
      this.closed = true
      if (typeof this.onClose === 'function') {
        this.onClose(this)
      }
    },

    clearTimer () {
      clearTimeout(this.timer)
    },

    startTimer () {
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          if (!this.closed) {
            this.close()
          }
        }, this.duration)
      }
    },
    keydown (e) {
      if (e.keyCode === 27 && !this.closed) { // esc关闭消息
        this.close()
      }
    },
    onMouseenter () {
      if (this.urlText) {
        this.clearTimer()
      }
    },
    onUrlTextClick () {
      if (typeof this.onClick === 'function') {
        this.onClick(this)
      }
    }
  },
  mounted () {
    const path = location.pathname
    const offsetPath = ['/usercenter', '/securitycenter', '/orderlis', '/couponlist']
    if (offsetPath.includes(path)) {
      this.offsetX = 'message-offset'
    }
    this.startTimer()
    document.addEventListener('keydown', this.keydown)
  },
  beforeDestroy () {
    document.removeEventListener('keydown', this.keydown)
  }
}
</script>
<style lang="scss" scoped>
.iconClass{
  margin-right:5px
}
.ps-massage {
  text-align: center;
  margin: 0 auto;
  display: flex;
  align-items:center;
  overflow: hidden;
  .svg-icon {
    color: #ff7979;
    font-size: 28px;
    margin-right: 10px;
  }
  .icon-error{
    font-size:14px;
    margin-right:5px
  }
  .ps-massage_inner {
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    white-space: nowrap;
  }
  .url-text {
    margin-left: 10px;
    font-size: 14px;
    line-height: 22px;
    color: #08a1c8;
    cursor: pointer;
  }
  &.has-svg {
    padding: 4px 0;
    .ps-massage_inner {
      line-height: 28px;
    }
    .url-text {
      line-height: 28px;
    }
  }
}
.ps-message-box {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 7px 15px;
  border: 0;
  min-width: 146px;
  color: #fff;
  &.tCenter {
    top: 50% !important;
    margin-top: -18px;
  }
}
.ps-message-box-1{
  padding:0 24px;
  border-radius: 58px;
}
.message-offset{
  left: calc(50% + 80px);
}
</style>
